<template>
    <div class="wrapper-my">
       <div class="login">
         <img  src="../assets/login.a4c656a9.png"/>
       </div>
      
      <van-form v-if="!show"> 
        <van-field
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />

        
        <p class="from-mode">
          <span class="span1">找回密码</span>
          <span class="span2" @click="huan">注册/验证码登录</span>
        </p>
        <div style="margin: 16px;">
          <van-button class="btn" type="warning" @click="login">登录</van-button>
          <van-button class="btn" >第三方登录</van-button>
        </div>
        <div class="Third-party">
          <div>
            <img src="../assets/下载.png"/>
            <span>微信登陆</span>
          </div>
          <div>
            <img src="../assets/qq.png"/>
            <span>QQ登陆</span>
          </div>
        </div>
      </van-form>
      <van-form v-if="show">
        <van-field
          v-model="mobile"
          name="手机号"
          label="手机号"
          placeholder="手机号"
          :rules="[{ required: true, message: '请填写手机号' }]"
        />
        <van-field
          v-model="code"
          center
          clearable
          label="短信验证码"
          placeholder="请输入短信验证码"
          >
          <template #button>
            <van-button size="small" type="primary" v-if="!show2" @click="send">发送验证码</van-button>
            <van-button size="small" disabled type="primary" v-if="show2">{{time}}S后再试</van-button>
          </template>
        </van-field>
         <p class="from-mode">
          <span class="span1" style="color:red">未注册的手机号会自动注册</span>
          <span class="span2" @click="huan">账号密码登录</span>
        </p>
        <div style="margin: 16px;">
          <van-button class="btn" type="warning" @click="code_login">登录</van-button>
        </div>
      </van-form>
    </div>
</template>

<script>
import tabs from "../components/tabs";
import { sendCode, login } from "../request/http.js";
export default {
  components: {
    tabs
  },
  data() {
    return {
      username: "",
      password: "",
      show: false,
      mobile: "",
      code: "",
      time: 5,
      show2: false
    };
  },
  methods: {
    login() {
      if (this.username == "" && this.password == "") {
        this.$toast.fail("请输入账号或密码");
        return;
      }
      login({
        mobile: this.username,
        password: this.password,
        type: 1,
        client: 1
      }).then(res => {
        console.log(res);
        console.log(res.data.code);
        if (res.data.code == 200) {
          this.$router.push('/my')
          localStorage.setItem("token", res.data.data.remember_token);
        }
      });
    },
    huan() {
      this.show = !this.show;
    },
    code_login() {
      if (this.mobile == "" && this.code == "") {
        this.$toast.fail("请输入手机号或验证码");
        return;
      }
      login({
        mobile: this.mobile,
        sms_code: this.code,
        type: 2,
        client: 1
      }).then(res => {
        console.log(res);
        if (res.data.data.is_new == 1) {
          this.$router.push("/editpassword");
        }
        localStorage.setItem("token", res.data.data.remember_token);
      });
    },
    send() {
      if (this.mobile == "") {
        this.$toast.fail("请输入手机号");
        return;
      }
      sendCode({ mobile: this.mobile, sms_type: "login" }).then(res => {
        console.log(res);
        let timer = setInterval(item => {
          this.show2 = true;
          this.time--;
          if (this.time == 0) {
            this.show2 = false;
            this.time = 5;
            clearInterval(timer);
          }
        }, 1000);
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.wrapper-my {
  width: 100%;
  height: 100vh;
  background: #fff;
  .login {
    width: 100%;
    box-sizing: border-box;
    height: 5rem;

    position: relative;
    img {
      width: 6rem;
      display: block;
      position: absolute;
      top: 50%;
      left: 48%;
      transform: translate(-50%, -50%);
    }
  }
  .btn {
    width: 100%;
    border-radius: 1rem;
  }
  .from-mode {
    width: 100%;
    box-sizing: border-box;
    padding: 0 0.5rem;
    .span2 {
      float: right;
    }
  }
  .btn {
    margin-top: 0.2rem;
  }
  .Third-party {
    width: 100%;
    height: 2rem;

    display: flex;

    div {
      flex: 1;
      display: flex;
      line-height: 2rem;
      box-sizing: border-box;
      padding: 0 1rem;
      img {
        width: 1rem;
        height: 1rem;
        margin-top: 0.4rem;
      }
      span {
        display: inline-block;
        height: 2rem;
        margin-left: 0.2rem;
        font-size: 0.4rem;
        margin-top: -0.1rem;
      }
    }
  }
}
</style>